import React from "react";
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

export default class MonthViewsBar extends React.Component{
  componentDidMount(){
    let curYear = new Date().getFullYear();
    let viewsChart = echarts.init(this.el);
    viewsChart.setOption({
      title: { 
        text: '每月浏览量',
        textStyle:{
          fontSize:14,
          fontWeight:'normal'
        }
      },
      xAxis: {
        name:"月份",
        type: 'category',
        data: [curYear+"/01", curYear+"/02", curYear+"/03", curYear+"/04", curYear+"/05", curYear+"/06", curYear+"/07", curYear+"/08", curYear+"/09", curYear+"/10", curYear+"/11", curYear+"/12"]
      },
      yAxis: {
        name:"浏览量",
        type: 'value',
        nameLocation:'start',
        nameTextStyle:{
          align:"right"
        },
        axisLine:{
          show:true
        }
      },
      grid:{
        top:"38px",
        left:"40px",
        bottom:"30px",
        right:"50px"
      },
      series: [{
          type: 'bar',
          data: [5, 20, 36, 60, 156, 3512, 3236, 5123, 5612, 3223, 4231, 2331],
          barWidth:16,
          itemStyle:{
              color:'#0080c9',
              barBorderRadius: 4
          },
          label: {
            show: true,
            position: 'top'
          }
      }]
    });
  }

  render(){
    return <React.Fragment>
        <div 
        ref={el => (this.el=el)}
        style={{width:"100%",height:"100%"}}
        ></div>
      </React.Fragment>
  }
}